<template>
  <div class="emoji-container">
    <span @click="transmit('EMOJI-1')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-1' width="35px" height="35px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-2')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-2' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-3')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-3' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-4')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-4' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-5')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-5' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-6')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-6' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-7')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-7' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-8')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-8' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-9')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-9' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-10')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-10' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-11')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-11' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-12')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-12' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-13')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-13' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-14')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-14' width="30px" height="30px" class="icon"/>
    </span>
    <span @click="transmit('EMOJI-15')">
      <svg-icon style="margin-left: 10px;" icon-class='EMOJI-15' width="30px" height="30px" class="icon"/>
    </span>
  </div>
</template>

<script>
export default {
  name: 'emojiIndex',
  data () {
    return {
      emojiStr: ''
    }
  },
  props: {
    emojiList: {
      type: String,
      default: ''
    }
  },
  methods: {
    transmit (classname) {
      console.log(classname)
      this.emojiStr = this.emojiList
      this.emojiStr += classname + '$'
      // console.log(this.emojiStr.split('$'))
      this.$emit('emojiStr', this.emojiStr)
    }
  }
}
</script>

<style scoped lang="less">
.emoji-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  span {
    padding: 0px 10px 10px;
  }
}
</style>
